<template>
  <div class="business">
    <div class="business-title border-bottom" v-if="showEdit">
      <i class="icon-xiangzuo" @click="jumpPersonal"></i>
      <span @click="jumpPersonal">个人中心</span>
    </div>
    <div  style="height:1.5rem;" v-if="showEdit"></div>
    <div class="business-box" v-show="init">
      <div class="wall">
        <div class="wall-box">
          <div class="pic" v-if="!defaultAvatar || avatar !==''">
            <img :src="avatar" alt="">
          </div>
          <div class="pic" v-if="defaultAvatar">
            <img src="~common/image/initPic.png" alt="">
          </div>
          <div class="item name">{{information.name}}</div>
          <div class="item label">
            <i class="icon-yuangong"></i>
            <span v-if="information.position">{{information.position}}</span>
            <span v-if="!information.position">普通用户</span>
          </div>
        </div>
        <div class="generate" v-if="showEdit" @touchend="jumpGenerate()">
          <i class="icon-zhizuo"></i>
          生成名片
        </div>
        <div class="edit" v-if="showEdit" @touchend="jumpEdit(information)">
          <i class="icon-edit"></i>
          编辑
        </div>
        <div class="edit make" v-if="showMake" @touchend="jumpGreeting">
          <i class="icon-zhizuo"></i>
          我也要制作
        </div>
      </div>
      <!-- 切换按钮 -->
      <div class="nav_peroson border " id="nav" >
        <div class="border-right" v-for="(list,index) in navLists" :class="{current:changeRed == index}" @click="reds(index)">{{list.text}}<s></s></div>
      </div>
      <!-- 个人信息 -->
      <div class="personage padbtn2" v-show="showNav==true">
          <div class="contact">
            <div class="box">
              <a :href="'tel:'+information.moblie_phone" class="preview" v-if="information.moblie_phone">
                <span class="title">手机</span>
                <span class="content">{{information.moblie_phone}}</span>
                <i class="icon-dianhua"></i>
              </a>
              <div class="preview border-top" v-if="information.weixin" @click="existsEWM(information.wx_image.path)">
                <span class="title">微信</span>
                <span class="content">{{information.weixin}}</span>
                <i class="icon-weixin"></i>
              </div>
            </div>
          </div>
          <div class="other">
            <div class="preview border-bottom" v-if="information.email">
              <span class="title">电子邮箱</span>
              <span class="content">{{information.email}}</span>
            </div>
            <div class="preview border-bottom" v-if="information.company">
              <span class="title">公司名称</span>
              <span class="content">{{information.company}}</span>
            </div>
            <div class="preview address border-bottom" v-if="information.address||information.areaid_1"
                @click="jumpMap(information)">
              <span class="title">地址</span>
              <span class="content">{{information.areaid_1}}{{information.areaid_2}}{{information.areaid_3}}{{information.address}}</span>
              <i class="icon-ditu"></i>
            </div>
            <div class="preview address border-bottom" v-if="information.homepage_url">
              <span class="title">网址</span>
              <a :href="information.homepage_url" class="content">{{information.homepage_url}}</a>
            </div>
            <div class="preview address border-bottom" v-if="information.department">
              <span class="title">部门</span>
              <span class="content">{{information.department}}</span>
            </div>
            <div class="preview address border-bottom" v-if="information.qq">
              <span class="title">QQ</span>
              <span class="content">{{information.qq}}</span>
            </div>
            <div class="preview address border-bottom" v-if="information.weibo">
              <span class="title">微博</span>
              <a :href="information.weibo" class="content">{{information.weibo}}</a>
            </div>
            <div class="preview border-bottom" v-if="information.intro">
              <span class="title">个人说明</span>
              <span class="content" v-html="information.intro"></span>
            </div>
            <div class="preview" v-show="oneCollet">
                <span class="title">收藏</span>
                <ul class="enshrine">
                  <li v-for="item in collet"><a :href="item.goods_url"><img :src="item.goods_image"></a></li>
                </ul>
                <img src="~common/image/right-arrows.png" class="right-arrows" @click="oneClice">
            </div>
          </div>
          <div class="showEWM" v-show="showEWM" @touchmove.prevent="">
            <div class="ewm-box">
              <div class="ewm-pic">
                <img v-show="ewm !==''" v-lazy="ewm" alt="">
                <img src="~common/image/ewmError.png" v-show="ewm ===''">
                <span @click="showEWM = false "><img src="~common/image/close.png" alt=""></span>
              </div>
              <div class="ewm-btn" v-show="ewm !==''">
                长按二维码识别
              </div>
            </div>
          </div>
          <div class="showEWM" v-show="showSave" @touchmove.prevent="">
            <div class="ewm-box">
              <div class="ewm-pic">
                <img v-show="saveEWM !==''" :src="saveEWM" alt="">
                <img v-show="saveEWM ===''" src="~common/image/loading.gif" alt="">
                <span @click="showSave = false"><img src="~common/image/close.png" alt=""></span>
              </div>
              <div class="ewm-btn">
                长按二维码保存到通讯录
              </div>
            </div>
          </div>
          <div class="save" @click="saveAddress" v-if="showMake">
            <span>保存到通讯录</span>
          </div>
      </div>
      <!-- 收藏 -->
      <div class="favorite_love" v-show="showNav==false" id="favorite" >
        <ul >
          <li v-for="item in lists">
            <a :href="item.goods_url">
              <img :src="item.goods_image">
              <p>{{item.goods_name}}</p>
              <span>¥{{item.log_price}}</span>
            </a>
          </li>
        </ul>
        <div v-show="isShowEmpty" class="no_love">
          <img src="~common/image/no_love.png" >
          <p>你的收藏夹暂时为空~</p>
        </div>
      </div>
    </div>

    <div class="showEWM" v-show="showCard" @touchmove.prevent="">
      <div class="card-box">
        <div class="ewm-pic">
          <img v-show="businessCard !==''" :src="businessCard" alt="">
          <img v-show="businessCard ===''" src="~common/image/loading.gif" alt="">
          <span @click="showCard = false"><img src="~common/image/close.png" alt=""></span>
        </div>
        <div class="card-btn">
          长按图片发送给好友
        </div>
      </div>
    </div>

    <!--loading加载-->
    <Loading v-show="loading"></Loading>
  </div>
</template>

<script>
  import {editInit, CreateCardPictrue,Collect,otherCollect} from 'common/js/business'
  import {OpenIdRecord, weChatShare, statisticsShare} from 'common/js/weChat'
  import {mapMutations, mapGetters} from 'vuex'
  import Loading from 'components/loading/Loading'
  import {setTitle} from 'common/js/title'
  import {computePV,recordPictureShare} from 'common/js/statistics'
import flash from '../../../../public/static/xheditor/xheditor_skin/vista/img/flash.gif';
  export default {
    data() {
      return {
        init: false,
        information: {},//名片信息
        showEdit: false,//是否显示编辑
        showMake: false,//是否显示制作
        defaultAvatar: false, //区分头像，是否显示默认头像
        avatar: '',//头像
        ewm: '',//二维码
        showEWM: false,//显示二维码
        saveEWM: '',//通讯录
        showSave: false,//保存到通讯录
        showCard: false, //显示名片
        businessCard: '',//名片
        showNav:true, //导航显示
        navLists:[
         {"text":"个人"},
         {"text":"收藏"}
        ],
        changeRed:0,   
        lists:[],
        isfag: true,
        inits: false, //初始化第一次
        curpage:1,
        loading: false,//是否加载更多的动画
        isShowEmpty:false, //是否显示空提示 
        oneCollet:false,
        collet:[],   //我也要制作---收藏
        card_id:"",
        isLoad:true,   //最后一页重复请求
      }
    },
    // computed: {
    //   ...mapGetters([
    //     'loading'
    //   ]),
    // },
    mounted() {
      computePV({
        page_type:5
      })
      if (window.location.href.indexOf("is_pic") >  0){
        recordPictureShare({
          'receiver_id':localStorage.getItem('token'),
          'card_id':this.$route.params.token,
          'type':0
        })
      }
      //判断是否微信内核
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        if (window.location.href.indexOf("goWeChat") === -1) {
          window.location.href = "https://www.6vbuy.com/member/index.php?act=wx_login&op=getSilenceInfo2&com=6vbuy&go=1&id=" + this.$route.params.token;
        } else {
          if (window.location.href.indexOf("o_id") > 0) {
            this.openId = this.getUrl('o_id');
            OpenIdRecord({
              "card_id": this.$route.params.token,//session_id
              "openId": this.getUrl('o_id'),//openId
            })
          }
          this.is_init();
        }
      } else {
        this.is_init();
      }
      
    
    },
    methods: {
      //跳转到个人中心
      jumpPersonal() {
        this.$router.push('/personal')
      },
      //初始化调用
      is_init() {
        CreateCardPictrue({
          "phpsid": localStorage.getItem('token'),//session_id
          "card_id":this.$route.params.token
        }).then(res => {
          this.businessCard = res.data + '?t=' + new Date().getTime();
        })
        this.saveEWM = baseURL + 's=Show/SaveAddrBook/id/' + this.$route.params.token;
        this.$store.dispatch('showLoading');
        editInit({
          "card_id": this.$route.params.token,
          "phpsid": localStorage.getItem('token'),
        }).then(res => {
          this.$store.dispatch('hideLoading');
          if (res.status === 1) {
            setTitle(res.data.name + '的名片')
            this.init = true;
            this.information = res.data;
            if (res.data.head_img.path) {
              this.defaultAvatar = false;
              this.avatar = res.data.head_img.path
            } else {
              this.defaultAvatar = true;
            }
            this._weChatShare();
              // is_oneself = 1 是查看自己
            if (res.expand.is_oneself === 1) {
              this.showEdit = true;
              this.oneCollet = false;
              // this.Collect_love();   // 查看自己的收藏
            } else {
              this.showMake = true;
              this.oneCollet = true;
              this.other_Collect();     // 查看别人的收藏
            }
            // 初始化 其他人查看我的首页中的收藏
             var data = res.data.favorite_goods;
             if(data !=null && data !=""){
                this.collet = data;
             }else{
               this.oneCollet = false;
             }
             
            // 从路径中获取card_id
             this.card_id= res.data.id;

             if(this.curpage > res.data.toatlPage){
                this.toastNone();
             }
          }
        })
       
      },
      //跳转到地图
      jumpMap(item) {
        this.$router.push('/baiduMap/' + item.areaid_1 + item.areaid_2 + item.areaid_3 + item.address)
      },
      //生成图片
      jumpGenerate() {
        this.showCard = true;
      },
      //保存到通讯录
      saveAddress() {
        this.showSave = true;
      },
      //判断是否存在二维码
      existsEWM(item) {
        this.showEWM = true;
        if (item == null || item === '') {
        } else {
          this.ewm = item;
        }
      },
      //我也要制作
      jumpGreeting() {
        this.$router.push('/login')
      },
      //跳转到编辑页面
      jumpEdit(item) {
        this.$router.push('/editBusiness/'+this.$route.params.token);
        this.editBusiness(item)
      },
      //获取url参数
      getUrl(para) {
        var paraArr = location.search.substring(1).split('&');
        for (var i = 0; i < paraArr.length; i++) {
          if (para == paraArr[i].split('=')[0]) {
            return paraArr[i].split('=')[1];
          }
        }
        return '';
      },
      //微信分享统计
      _weChatShare() {
        weChatShare({
          url: encodeURIComponent (location.href.split('#')[0])
        }).then(res => {
          if (res.status === 1) {
            wx.config({
              debug: false,
              appId: res.data.appId, // 必填，公众号的唯一标识
              timestamp: res.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.signature,// 必填，签名
              jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表
            });
            wx.ready(() => {
              //分享到朋友圈
              wx.onMenuShareTimeline({
                title: this.information.name + '的名片', // 分享标题
                link: baseWeChatURL + 'business/' + this.$route.params.token,
                imgUrl: this.information.card_code, // 分享图标
                success: () => {
                  statisticsShare({
                    "openid": this.openId,
                    "page_type": 0,
                    "channel": 0
                  });
                },
              });
              //分享给朋友
              wx.onMenuShareAppMessage({
                title: this.information.name + '的名片', // 分享标题
                desc: '', // 分享描述
                link: baseWeChatURL + 'business/' + this.$route.params.token,
                imgUrl: this.information.card_code, // 分享图标
                type: '微微晒' + this.information.name + '的名片', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: () => {
                  statisticsShare({
                    "openid": this.openId,
                    "page_type": 0,
                    "channel": 1
                  });
                },
              });
              //分享到QQ
              wx.onMenuShareQQ({
                title: this.information.name + '的名片', // 分享标题
                desc: '微微晒' + this.information.name + '的名片', // 分享描述
                link: baseWeChatURL + 'business/' + this.$route.params.token,
                imgUrl: this.information.card_code, // 分享图标
                success: () => {
                  statisticsShare({
                    "openid": this.openId,
                    "page_type": 0,
                    "channel": 3
                  });
                },
              });
              //分享到QQ空间
              wx.onMenuShareQZone({
                title: this.information.name + '的名片', // 分享标题
                desc: '微微晒' + this.information.name + '的名片', // 分享描述
                link: baseWeChatURL + 'business/' + this.$route.params.token,
                imgUrl: this.information.card_code, // 分享图标
                success: () => {
                  statisticsShare({
                    "openid": this.openId,
                    "page_type": 0,
                    "channel": 2
                  });
                },
              });
            });
          }
        })
      },
      // 导航
      reds(index){ 
        this.changeRed = index;
        if(index == 0){
          this.showNav = true;
           this.isfag = false;
        }else{
          this.showNav = false;
          if( this.isfag == true){
            this.load();
            this.Collect_love();
            this.isfag = false;
            this.loading = true;
          }
           return false;
        }
      },
      // 弹框提示
      toastNone() {
              this.$dialog.toast({
                  mes: '没有更多啦！',
                  timeout: 1500
              });
          },
      //收藏---自己查看自己的收藏
      Collect_love() {
          this.loading = true;
          Collect({
          "phpsid": localStorage.getItem('token'),//session_id
          "page":this.curpage,
          "limit":6,
        }).then(res => {
          this.loading = false;
          if (res.status === 1) {
              var data = res.data.list;
              //判断是否能加载更多
              if(res.data.page <= res.data.toatlPage){
                  this.curpage = this.curpage + 1;
                   console.log(this.lists)
                  //判断是否第一次加载，不是为合并数组
                  if (this.inits) {
                      this.lists = this.lists.concat(data);
                      console.log(this.lists)
                  } else {
                      this.lists = data;
                      this.inits = true;
                  }
   
              }else{
                if(this.inits) {
                  this.toastNone();
                  this.isLoad=false;
                }else{
                  this.isShowEmpty = true;
                }
                return false;
              }
          }
        })
      },
      //收藏---自己查看别人的收藏
      other_Collect() {
        // console.log(123)
          this.loading = true;
          otherCollect({
          "card_id":this.card_id,// this.card_id
          "page":this.curpage,
          "limit":6,
        }).then(res => {
          this.loading = false;
          if (res.status === 1) {
              var data = res.data.list;
              //判断是否能加载更多
              if(res.data.page <= res.data.toatlPage){
                  this.curpage = this.curpage+1;
                  //判断是否第一次加载，不是为合并数组
                  if (this.inits) {
                      this.lists = this.lists.concat(data);
                      // console.log(this.lists)
                  } else {
                      this.lists = data;
                      this.inits = true;
                  }
              }else{
                if(this.inits) {
                   this.isLoad=false;
                  return false;
                }else{
                  this.isShowEmpty = true;
                }
                return false;
              }
          }
        })
      },
      // 收藏---我要制作  显示前三个
      oneClice(){
          this.changeRed = 1;
          this.showNav = false;
          if( this.isfag == true){
            this.load();
            this.Collect_love();
            this.isfag = false;
            this.loading = true;
          }
          return false;
      },

      // 下滑加载更多
      load(){
        var _this = this;
           //文档高度
            function getDocumentTop() {
                var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
                if (document.body) {
                    bodyScrollTop = document.body.scrollTop;
                }
                if (document.documentElement) {
                    documentScrollTop = document.documentElement.scrollTop;
                }
                scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;   
                return scrollTop;
            }
            //可视窗口高度
            function getWindowHeight() {
                var windowHeight = 0;    
                if (document.compatMode == "CSS1Compat") {
                    windowHeight = document.documentElement.clientHeight;
                } else {
                    windowHeight = document.body.clientHeight;
                }
                return windowHeight;
            }
            //滚动条滚动高度
            function getScrollHeight() {
                var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
                if (document.body) {
                    bodyScrollHeight = document.body.scrollHeight;
                }
                if (document.documentElement) {
                    documentScrollHeight = document.documentElement.scrollHeight;
                }
                scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;    return scrollHeight;
            }
            window.onscroll = ()=> {
              //监听事件内容
              if(getScrollHeight()-1 <= getWindowHeight() + getDocumentTop()){
                  //当滚动条到底时,这里是触发内容
                  if(this.isLoad){
                    this.Collect_love();
                  }
                  return false;

              }
            }   
        },
      ...mapMutations({
        editBusiness: 'EDIT_BUSINESS'
        })
      },

    components: {
      Loading
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .business-title
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5rem;
    line-height: 1.5rem
    font-size: .55rem;
    color: $color-title;
    background: $background;
    z-index: 99;
    padding-left: 1.3rem;
    i
      position: absolute;
      top: 0;
      left: .5rem;
      line-height: 1.5rem;
      font-size: .6rem;
      color: $color-l-z;
    span
      font-size: .43rem;

  .business-box
    // padding-bottom: 2.37rem;

  .card
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $background-show;
    img
      width: 100%;

  .wall
    position: relative;
    height: 5.12rem;
    background: #f65ecb;
    background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .item
      width: 100%;
      text-align: center;
      color: $color;
      margin-top: .1rem;
    .name
      line-height: .78rem;
      font-size: .54rem;
    .label
      font-size: .3rem;
    .pic
      border: 2px solid #915dee;
      border-radius: 50%;
      overflow: hidden;
      width: 2.94rem;
      height: 2.94rem;
      display: flex;
      justify-content: center;
      align-items: center;
      img
        width: 2.64rem;
        height: 2.64rem;
        border-radius: 50%;
    .edit
      position: absolute;
      top: .5rem;
      right: .5rem;
      color: $color;
      font-size: .4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      i
        margin-right: .1rem;
    .generate
      position: absolute;
      top: .5rem;
      left: .5rem;
      color: $color;
      font-size: .4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      i
        font-size: .5rem;
        margin-right: .1rem;

  .contact
    background: $background-b;
    padding-bottom: .2rem;
    .box
      background: $background;

  .preview
    position: relative;
    padding: 0 .8rem 0 2.48rem;
    min-height: 1.3rem;
    margin: 0 .5rem;
    font-size: .45rem;
    display: block;
    color: $color-b-text;
    .title
      position: absolute;
      top: 0;
      left: 0;
      width: 2.37rem;
      color: $color-b-title;
    span, a
      display: inline-block;
      margin: .5rem 0;
      line-height: .66rem;
    i
      position: absolute;
      top: 0;
      right: 0;
      width: .73rem;
      text-align: center;
      display: block;
      line-height: 1.45rem;
      font-size: .56rem;
      color: $color-b-icon;
  .padbtn2
      padding-bottom: 2.2rem;
  .address
    padding: 0 2.66rem 0 2.48rem;
    i
      top: 50%;
      line-height: 0;

  .make
    font-size: .28rem !important;
    i
      font-size: .39rem !important;

  .save
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .5rem;
    text-align: center;
    background: #fff;
    span
      width: 5rem;
      line-height: 1.36rem;
      border-radius: .68rem;
      display: inline-block;
      color: $color;
      background: #f65ecb;
      font-size: .46rem;
      background: -webkit-linear-gradient(-300deg, rgba(246, 94, 203, .8), rgba(147, 102, 241, .8));

  .showEWM
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $background-show;
    z-index: 999;

    .ewm-box
      position: absolute;
      top: 50%;
      left: 1.25rem;
      right: 1.25rem;
      transform: translateY(-50%);
    .ewm-pic
      position: relative;
      span
        position: absolute
        top: -.5rem;
        right: -.5rem;
        height: 1rem;
        width: 1rem;
        img
          width: 1rem;
          height: 1rem;

    .card-box
      position: absolute;
      top: 50%;
      left: .9rem;
      right: .9rem;
      transform: translateY(-50%);
      img
        border-radius: .1rem;
        width: 100%;
        height: 100%;
    .ewm-btn
      margin-top: .3rem;
      line-height: 1.12rem;
      border-radius: .56rem;
      color: $color;
      text-align: center;
      font-size: .42rem;
    .card-btn
      margin: 0 .6rem;
      margin-top: .3rem;
      line-height: 1.12rem;
      border-radius: .56rem;
      color: $color;
      text-align: center;
      font-size: .42rem;
    img
      width: 100%;
  .nav_peroson
    height:1.4rem;
    line-height:1.4rem;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:.48rem;
    div
      width:50%;
      text-align: center;
      height: 100%;
      line-height: 1.4rem;
      position: relative;
      margin-left:0.35rem;
      font-size:0.54rem;
    div.current
      color:#fe42c9;
      s
        width: 58%;
        display: block;
        height: 2px;
        position: absolute;
        bottom: 0px;
        margin: 0 auto;
        z-index: 2;
        margin-left: 15%;
        background: #fe42c9;
    div:first-child
      background:url("~common/image/person-black.png") no-repeat;
      background-size: 10%;
      background-position: 29% 48%;
    div:first-child.current
      background:url("~common/image/person-red.png") no-repeat;
      background-size: 10%;
      background-position: 29% 48%;
    div:nth-child(2)
      background:url("~common/image/strat-black.png") no-repeat;
      background-size: 11%;
      background-position: 28% 49%;
    div:nth-child(2).current
      background:url("~common/image/strat-red.png") no-repeat;
      background-size: 11%;
      background-position: 28% 49%;
  .favorite_love
    width:100%;
    ul
      overflow:auto;
      padding-bottom:1rem;
    ul li
      width:50%;
      float:left;
      margin-top:.5rem;
    a
      display: block;
    img
      width:145px;
      height:135px;
      margin:0 auto;
      display:block;
    p
      font-size:.34rem;
      margin:.3rem 0;
      margin-left:.6rem;
      line-height:.7rem;
      width:145px;
      height: .7rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    span
      font-size:.34rem;
      margin:.3rem 0;
      margin-left:.6rem;
      width:145px;
  .yd-notify
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(40,40,40,.85);
    line-height: .28rem;
    font-size: .26rem;
    color: #fff;
    padding: .3rem .24rem;
    opacity: 0;
    -webkit-animation: yd-kf-down-in .2s linear forwards;
    animation: yd-kf-down-in .2s linear forwards;
    word-break: break-all;
    text-align: center;
    z-index: 2000;
  .no_love
    margin-top:1rem;
    img
     width:112px;
     height:112px;
    p 
     font-size:0.43rem;
     text-align: center;
     width: 100%;
     margin-left: 0
.enshrine
  width:100%;
  overflow: auto;
  li
   float:left;
  li:nth-child(2)
    margin: 0 0.25rem; 
   img
     width:60px;
     height:60px;
     margin-right:.1rem;
.right-arrows
  position: absolute;
  right: 0;
  top: 1rem;
  width: 10px;
  cursor: pointer;

</style>

